<template>
  <echartsView :loading="loading" :options="options" height="260px"></echartsView>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView
  },
  props: {
    data: {
      required: true,
      type: Object,
      default: () => {}
    }
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler (n) {
        if (!this.$isEmpty(n)) {
          this.setOptions()
        }
      }
    }
  },
  data () {
    return {
      loading: false,
      options: {
        color: ['#2478f2', '#84b7f9'],
        title: {
          text: '来源对比',
          top: '16px',
          left: '16px',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'bar'
          },
          {
            type: 'bar'
          }
        ],
        dataset: {
          source: [['product', '社区', '网申']]
        },
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 3 // 一次性展示多少个。
          }
        ]
      }
    }
  },
  methods: {
    setOptions () {
      this.loading = true
      this.options.dataset.source = [['product', '社区', '网申']]
      // eslint-disable-next-line camelcase
      const { Module_4 } = this.data
      console.log(Module_4)
      Module_4[0].Name.forEach((e, index) => {
        this.options.dataset.source.push([e, Module_4[0].Count[index], Module_4[1].Count[index]])
      })
      this.loading = false
      setInterval(() => {
        if (this.options.dataZoom[0].endValue === 12) {
          this.options.dataZoom[0].endValue = 3
          this.options.dataZoom[0].startValue = 0
        } else {
          this.options.dataZoom[0].endValue = this.options.dataZoom[0].endValue + 1
          this.options.dataZoom[0].startValue = this.options.dataZoom[0].startValue + 1
        }
      }, 3000)
    }
  }
}
</script>
<style scoped>
</style>
